<template>
	<view class="container">
		<!-- 顶部选项卡 -->
		<view class="tab-bar">
			<view class="tab-item" :class="{ active: currentTab === '已上架' }"
				@click="currentTab = '已上架'; refreshGoodsList()">已上架</view>
			<view class="tab-item" :class="{ active: currentTab === '已下架' }"
				@click="currentTab = '已下架'; refreshGoodsList()">已下架</view>
		</view>

		<!-- 商品列表 -->
		<view class="product-list" v-if="currentTab === '已上架'">
			<view class="product-item" v-for="(product, index) in filteredGoodsList" :key="index">
				<view class="">
					<checkbox-group @change="(e)=>{change_fun(e,index)}">
						<label>
							<checkbox :checked="product.checked" color="#FFCC33" style="transform:scale(0.7)" />
						</label>

					</checkbox-group>
				</view>
				<view class="product-img" @click="checkGood(product)">
					<u-image :src="product.original" mode="aspectFit"></u-image>
				</view>
				<view class="product-info" @click="checkGood(product)">
					<view class="product-title">{{ product.goodsName }}</view>
					<view class="product-price">￥ {{ product.price }}</view>
					<view class="product-stats">
						<view>浏览量: {{ product.viewCount }}人次</view>
						<view>成交量: {{ product.deals }}件</view>
						<!-- marketEnable---上架=UPPER  下架=DOWN -->
						<view>商品状态: {{ product.marketEnable }}</view>
					</view>
				</view>
				<view class="product-actions">
					<!-- <view class="action-button view-button">查 看</view> -->
					<!--  <view class="action-button exposure-button" @click="exposureHouse(product.id)">曝 光</view> -->
					<!-- <view class="action-button under-button" v-if="product.marketEnable === 'UPPER'" @click="underGoods(product)">下 架</view> -->
				</view>
			</view>
		</view>

		<!-- 已下架 -->
		<view class="product-list" v-if="currentTab === '已下架'">
			<view class="product-item" v-for="(product, index) in filteredGoodsList" :key="index">
				<view class="product-img"></view>
				<view class="product-info">
					<view class="product-title">{{ product.goodsName }}</view>
					<view class="product-price">￥ {{ product.price }}</view>
					<view class="product-stats">
						<view>浏览量: {{ product.viewCount }}人次</view>
						<view>成交量: {{ product.deals }}件</view>
						<view>商品状态: {{ product.marketEnable }}</view>
					</view>
				</view>
				<view class="product-actions">
					<view class="action-button view-button" @click="checkGood(product)">查 看</view>
					<view class="action-button under-button" v-if="product.marketEnable === 'UPPER'"
						@click="underGoods(product)">下架</view>
					<view class="action-button up-button" v-if="product.marketEnable === 'DOWN'"
						@click="upGoods(product)">上架</view>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="action-buttons">

				<view class="select-all">
					<checkbox-group @change="handleSelectAll">
						<label>
							<checkbox :checked="isAllSelected" />全选
						</label>
					</checkbox-group>

				</view>
			</view>
			<view class="confirm-button-container">
				<button class="confirm-btn" @click="confirmRemove">确认下架</button>
			</view>
		</view>
		<view class="add-icon-container">
			<view class="add-icon" @click="addProduct">
				<text>+</text>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getGoodsManageList,
		getGoodsSkuList,
		underGoods,
		upGoods,
		exposureHouse
	} from "@/api/goods.js";
	import UImage from "../../uview-ui/components/u-image/u-image.vue";

	export default {
		components: {
			UImage
		},
		data() {
			return {
				goodsList: [],
				goodsParams: {
					pageNumber: 1,
					pageSize: 10,
					storeId: "",
				},
				currentTab: '已上架',
				productList: [{
						id: 1,
						title: '精美电水壶，带加热功...',
						price: 30,
						views: 200,
						deals: 45,
						checked: false
					},
					{
						id: 2,
						title: '金品房源，精装修 大户型...',
						price: 1580000,
						views: 200,
						deals: 2,
						checked: false
					}
				],
				isAllSelected: false,
				selectedProducts: [],

				filteredGoodsList: [],
				lasteredGoodsList: []

			};
		},
		computed: {
			isAnySelected() {
				return this.selectedProducts.length > 0;
			},
			// 根据当前标签筛选商品列表
			// filteredGoodsList() {
			// 	if (this.currentTab === '已上架') {
			// 		console.log(this.goodsList.filter(product => product.marketEnable === 'UPPER'))
			// 		return this.goodsList.filter(product => product.marketEnable === 'UPPER');
			// 	} else {
			// 		return this.goodsList.filter(product => product.marketEnable === 'DOWN');
			// 	}
			// }
		},
		onLoad() {
			this.getGoodsData();
		},
		// 下拉加载
		onReachBottom() {
			this.goodsParams.pageNumber++;
			this.getGoodsData();
		},
		methods: {
			change_fun(item, index) {
				this.filteredGoodsList[index].checked = !this.filteredGoodsList[index].checked;
				console.log(this.filteredGoodsList)
			},
			/** 加载商品 */
			async getGoodsData(isRefresh = false) {
				if (isRefresh) {
					this.goodsParams.pageNumber = 1;
					this.goodsList = [];
				}
				// var store = uni.getStorageSync("store");
				//this.goodsParams.storeId = store.id;
				let res = await getGoodsManageList(this.goodsParams);

				if (res.data.success) {
					if (isRefresh) {
						this.goodsList = res.data.result.records;
					} else {
						this.goodsList.push(...res.data.result.records);
					}

					this.filteredGoodsList = this.goodsList.filter(product => product.marketEnable === 'UPPER');
					for (var i = 0; i < this.filteredGoodsList.length; i++) {
						this.$set(this.filteredGoodsList[i], 'checked', false)
					}
					this.lasteredGoodsList = this.goodsList.filter(product => product.marketEnable === 'DOWN');
					console.log(this.filteredGoodsList)
				}
			},
			refreshGoodsList() {
				this.getGoodsData(true);
			},
			handleCheckboxChange(product) {
				// 单选事件处理
				console.log(`商品 ${product.title} 的选中状态变为: ${product.checked}`);
				// 更新已选商品列表
				if (product.checked) {
					this.selectedProducts.push(product.id);
				} else {
					const index = this.selectedProducts.indexOf(product.id);
					if (index !== -1) {
						this.selectedProducts.splice(index, 1);
					}
				}
				// 更新全选状态
				this.isAllSelected = this.productList.every(item => item.checked);
			},
			handleSelectAll() {
				// 全选事件处理
				// this.productList.forEach(product => {
				// 	product.checked = this.isAllSelected;
				// });
				// this.selectedProducts = this.isAllSelected ?
				// 	this.productList.map(product => product.id) : [];
				console.log("执行了没有")
			this.isAllSelected=!this.isAllSelected
				for (var i = 0; i < this.filteredGoodsList.length; i++) {
					if(!this.isAllSelected){
						this.filteredGoodsList[i].checked = false
					}else{
						this.filteredGoodsList[i].checked = true
					}
					
				}
			},
			async confirmRemove() {
				// 确认下架的业务逻辑
				console.log('确认下架的商品:', this.selectedProducts);
				for (var i = 0; i < this.filteredGoodsList.length; i++) {
					if (this.filteredGoodsList[i].checked) {
						try {
							let params = {
								goodsId: this.filteredGoodsList[i].goodsId,
							};

							await underGoods(params);

							console.log('商品下架成功');
						
						} catch (error) {
							console.error('商品下架出错:', error);
						}
					}

				}
					this.refreshGoodsList();

			},
			addProduct() {
				// 新增商品的业务逻辑
				console.log('点击新增商品');
				uni.navigateTo({
					url: '/pages/store/createGoods'
				});
			},
			checkGood(item) {
				uni.navigateTo({
					url: '/pages/product/goods?id=' + item.id + "&goodsId=" + item.goodsId
				});
			},
			async underGoods(product) {
				try {
					let params = {
						goodsId: product.goodsId,
					};

					await underGoods(params);

					console.log('商品下架成功');
					this.refreshGoodsList();
				} catch (error) {
					console.error('商品下架出错:', error);
				}
			},
			async upGoods(product) {
				try {
					let params = {
						goodsId: product.goodsId,
					};
					await upGoods(params);
					console.log('商品上架成功');
					this.refreshGoodsList();
				} catch (error) {
					console.error('商品上架出错:', error);
				}
			},
			// 新增：记录商品曝光
			exposureHouse(id) {

				exposureHouse(id).then((result) => {
					if (result.code === 200) {
						uni.showToast({
							title: '信息曝光成功',
							icon: 'none',
							duration: 2000
						});
					} else {
						uni.showToast({
							title: result.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 20rpx;
	}

	.tab-bar {
		display: flex;
		justify-content: center;
		border-bottom: 1rpx solid #ccc;
	}

	.tab-item {
		padding: 10rpx 20rpx;
		color: #666;
	}

	.tab-item.active {
		color: #000;
		border-bottom: 2rpx solid #000;
	}

	.product-list {
		margin-top: 20rpx;
	}

	.product-item {
		display: flex;
		margin-bottom: 20rpx;
		border: 1rpx solid #eee;
		padding: 10rpx;
	}

	.product-img {
		width: 35%;
		background-color: #f0f0f0;
		margin-right: 20rpx;
	}

	.product-info {
		flex: 1;
	}

	.product-title {
		font-size: 28rpx;
		color: #333;
	}

	.product-price {
		font-size: 32rpx;
		color: #f60;
		margin-top: 5rpx;
	}

	.product-stats {
		font-size: 28rpx;
		color: #999;
		margin-top: 5rpx;
	}

	.product-checkbox {
		display: flex;
		align-items: center;
	}

	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 10rpx 20rpx;
		border-top: 1rpx solid #ccc;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.action-buttons {
		display: flex;
		align-items: center;
	}

	.select-all {
		display: flex;
		align-items: center;
	}

	.confirm-button-container {
		width: 45%;
	}

	.confirm-btn {
		background-color: #ccc;
		color: #fff;
		padding: 10rpx 20rpx;
		border: none;
		border-radius: 5rpx;
		width: 100%;
	}

	.confirm-btn[disabled] {
		background-color: #eee;
		color: #999;
	}

	.add-icon-container {
		position: absolute;
		bottom: 10%;
		right: 20rpx;
	}

	.add-icon {
		position: relative;
		bottom: 20rpx;
		right: 20rpx;
		width: 60rpx;
		height: 60rpx;
		background-color: #f90;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color: #fff;
	}

	.action-button {
		padding: 10rpx 20rpx;
		border: none;
		border-radius: 5rpx;
		margin-bottom: 5rpx;
		text-align: center;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.view-button {
		background-color: #007aff;
		color: #fff;
	}

	.view-button:hover {
		background-color: #0056b3;
	}

	.under-button {
		background-color: #ff3b30;
		color: #fff;
	}

	.under-button:hover {
		background-color: #cc0000;
	}

	.up-button {
		background-color: #4cd964;
		color: #fff;
	}

	.up-button:hover {
		background-color: #34a853;
	}

	/* 新增曝光按钮样式 */
	.exposure-button {
		background-color: #5865F2;
		color: #fff;
	}

	.exposure-button:hover {
		background-color: #4752C4;
	}
</style>